<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>网站首页</title>
<link rel="stylesheet" type="text/css" href="css/slideshow.css">
<style type="text/css">
 .checkimg {
 width: 100px;
 height: 40px;
 border: 1px solid gray;
 }
 #msg {color: red;} /* 后台返回的验证信息显示为红色 */
 </style>
</head>
<body>
	<!-- 导航条 -->
	<div class="container" style="height:66px">
		<img src="pictures/logo.jpg">
		<div style="float:right;">
			<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">注册</button>
    		<button onclick="document.getElementById('id02').style.display='block'" style="width:auto;">登录</button>  
    	</div>	
	</div>
<div id="id01" class="modal"><!-- 注册表单 -->
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
  <form class="modal-content animate" action="registerServlet">
    <div class="container2">
      <label><b>账号</b></label>
      <input type="text" placeholder="输入账号" name="logname">
      <label><b>姓名</b></label>
      <input type="text" placeholder="输入姓名" name="realname">
	  <label><b>电话号码</b></label>
      <input type="text" placeholder="输入电话号码" name="phone">
      <label><b>身份证号</b></label>
      <input type="text" placeholder="输入身份证号码"  name="ID">
      <label><b>设置密码</b></label>
      <input type="password" placeholder="输入密码" name="password">
      <label><b>确认密码</b></label>
      <input type="password" placeholder="重复密码" name="repeat">
      <input type="checkbox" checked="checked"> 记住密码
      <p><a href="#" class="register-tip tooltip">为什么要提供身份信息？<span>&nbsp;&nbsp;&nbsp;&nbsp;进行实名制认证，利于共享单车文明骑行，禁止向未满12岁的儿童提供服务，为用户购买人身意外伤害险等。</span></a></p>

      <div class="clearfix">
        <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">取消</button>
        <button type="submit" class="signupbtn">注册</button>
      </div>
    </div>
  </form>
  <iframe name="ajaxFrame" style="display: none;"></iframe>
</div>
 <div id="id02" class="modal"> 			<!-- 登录表单 -->
  <form class="modal-content animate" action="loginServlet">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="avatar">
    </div>
    <div class="container2">
      <label><b>账号</b></label>
      <input type="text" placeholder="输入账号" name="logname" required>
      <label><b>密码</b></label>
      <input type="password" placeholder="输入密码" name="password" required><br><br>
      <label><b>登录身份：</b></label>
      <input type="radio" name="radio" value="user">普通用户
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="radio" value="admin">管理员 <br><br>
      <label><b>验证码： </b></label> 
      <input name="checkCode" type="text"  id="checkCode" style="width: 30%;"/>&nbsp;&nbsp;  
      <img src="CheckCodeServlet" id="img" align="middle" class="checkimg"> &nbsp;&nbsp;
      <a href="" onclick="myReload()"> 看不清,换一个</a>  
      <button type="submit" style="background-color:#4CAF50;width:100%;">登录</button>
      <input type="checkbox" checked="checked"> 记住我
    </div>
    <div class="container2" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id02').style.display='none'" style="background-color:#f44336;width:auto;">取消</button>
      <span class="psw">忘记 <a href="#">密码？</a></span>
    </div>
  </form>
</div>
	<div class="slideshow-container"><!-- 幻灯片 -->
  		<div class="mySlides fade">
    		<div class="numbertext">1 / 3</div>
    		<img src="pictures/background.jpg" style="width:100%">
  		</div>  	
  		<div class="mySlides fade">
    		<div class="numbertext">2 / 3</div>
    		<img src="pictures/background1.jpg" style="width:100%">
  		</div>
  		<div class="mySlides fade">
    		<div class="numbertext">3 / 3</div>
    		<img src="pictures/background2.jpg" style="width:100%">
 		</div>
	</div>
	<div style="text-align:center">
  		<span class="dot" onclick="currentSlide(1)"></span> 
  		<span class="dot" onclick="currentSlide(2)"></span> 
 		<span class="dot" onclick="currentSlide(3)"></span> 
	</div>
	<script type="text/javascript">//JS部分
		// 获取模型1
		var modal = document.getElementById('id01');
		window.onclick = function(event) {
	    	if (event.target == modal) 
	        	modal.style.display = "none";// 鼠标点击模型外区域关闭注册框
	    }
	    // 获取模型2
		var modal2 = document.getElementById('id02');
	    window.onclick = function(event) {
		    if (event.target == modal2) 
	    		modal2.style.display = "none";// 鼠标点击模型外区域关闭登录框
	    }
	    //换验证码
	    function myReload() {  	      
	    	var imgObj = document.getElementById("img");  
	    	imgObj.src = "CheckCodeServlet?ran=" + Math.random();
	    	
	    }
      //自动切换图片
	    var slideIndex = 0;
	    showSlides();	     
	    function showSlides() {
	        var i;
	        var slides = document.getElementsByClassName("mySlides");
	        for (i = 0; i < slides.length; i++) {
	            slides[i].style.display = "none"; 
	        }
	        slideIndex++;
	        if (slideIndex> slides.length) {slideIndex = 1} 
	        slides[slideIndex-1].style.display = "block"; 
	        setTimeout(showSlides, 3000); // 间隔3秒后修改图片
	    }
	</script>
</body>
</html>